<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>地区分布统计</title>
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="$request.getContextPath()/resources/echarts/echarts.min.js"></script>
<style type="text/css">
body,.container-fluid,.container-fluid #areaContainer{
   width: 100%;
   height: 100%;
   position: absolute;
   padding:0px;
   margin:0px;
}
.highcharts-credits{
   visibility: hidden;
}
</style>
<script type="text/javascript">
//加载echarts图
function loadAreaContainer(){
	var myChart = echarts.init(document.getElementById('areaContainer'));
	//获取中国地图数据
	$.get('$request.getContextPath()/resources/echarts/china.json', function (chinaJson) {
        echarts.registerMap("china", chinaJson);
        // 图表使用-------------------
    	var option = {
    		    title : {
    		        text: '用户注册分布区域',
    		        x:'center'
    		    },
    		    tooltip : {
    		        trigger: 'item'
    		    },
    		    legend: {
    		        orient: 'vertical',
    		        x:'bottom',
    		        data:['用户地区']
    		    },
    		    toolbox: {
    		        show: true,
    		        orient : 'vertical',
    		        x: 'right',
    		        y: 'center',
    		        feature : {
    		            mark : {show: true},
    		            dataView : {show: true, readOnly: false},
    		            restore : {show: true},
    		            saveAsImage : {show: true}
    		        }
    		    },
    		    roamController: {
    		        show: true,
    		        x: 'right',
    		        mapTypeControl: {
    		            'china': true
    		        }
    		    },
    		    series : [
    		        {
    		            name: '用户地区',
    		            type: 'map',
    		            mapType: 'china',
    		            roam: false,
    		            itemStyle:{
    		                normal:{label:{show:true}},
    		                emphasis:{label:{show:true}}
    		            },
    		            data:[
    		                {name: '北京',value: Math.round(Math.random()*1000)},
    		                {name: '天津',value: Math.round(Math.random()*1000)},
    		                {name: '上海',value: Math.round(Math.random()*1000)},
    		                {name: '重庆',value: Math.round(Math.random()*1000)},
    		                {name: '河北',value: Math.round(Math.random()*1000)},
    		                {name: '河南',value: Math.round(Math.random()*1000)},
    		                {name: '云南',value: Math.round(Math.random()*1000)},
    		                {name: '辽宁',value: Math.round(Math.random()*1000)},
    		                {name: '黑龙江',value: Math.round(Math.random()*1000)},
    		                {name: '湖南',value: Math.round(Math.random()*1000)},
    		                {name: '安徽',value: Math.round(Math.random()*1000)},
    		                {name: '山东',value: Math.round(Math.random()*1000)},
    		                {name: '新疆',value: Math.round(Math.random()*1000)},
    		                {name: '江苏',value: Math.round(Math.random()*1000)},
    		                {name: '浙江',value: Math.round(Math.random()*1000)},
    		                {name: '江西',value: Math.round(Math.random()*1000)},
    		                {name: '湖北',value: Math.round(Math.random()*1000)},
    		                {name: '广西',value: Math.round(Math.random()*1000)},
    		                {name: '甘肃',value: Math.round(Math.random()*1000)},
    		                {name: '山西',value: Math.round(Math.random()*1000)},
    		                {name: '内蒙古',value: Math.round(Math.random()*1000)},
    		                {name: '陕西',value: Math.round(Math.random()*1000)},
    		                {name: '吉林',value: Math.round(Math.random()*1000)},
    		                {name: '福建',value: Math.round(Math.random()*1000)},
    		                {name: '贵州',value: Math.round(Math.random()*1000)},
    		                {name: '广东',value: Math.round(Math.random()*1000)},
    		                {name: '青海',value: Math.round(Math.random()*1000)},
    		                {name: '西藏',value: Math.round(Math.random()*1000)},
    		                {name: '四川',value: Math.round(Math.random()*1000)},
    		                {name: '宁夏',value: Math.round(Math.random()*1000)},
    		                {name: '海南',value: Math.round(Math.random()*1000)},
    		                {name: '台湾',value: Math.round(Math.random()*1000)},
    		                {name: '香港',value: Math.round(Math.random()*1000)},
    		                {name: '澳门',value: Math.round(Math.random()*1000)}
    		            ]
    		        }
    		    ]
    	};
    	myChart.setOption(option);
	});
}
$(function(){
	//如果当前窗口不是顶层窗口 则延迟加载
	if(top.window==self.window){
		loadAreaContainer();
	}else{
	    setTimeout(loadAreaContainer, 2000);
	}
});
</script>
</head>
<body>
<div class="container-fluid">
	<div id="areaContainer"></div>
</div>
</body>
</html>